import { defineComponent } from 'vue'
import { Col, Dropdown, Layout, Row, Menu } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import '@/views/index.scss'
import { useStore } from 'vuex'
import { modulesStore } from '@/store'

const { Header } = Layout

export default defineComponent({
  name: 'layoutHeader',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const store = useStore<modulesStore>()

    const handleMenuClick = (e: any) => {
      e.key === '1' && router.push('editUserInfo')
      e.key === '2' && store.dispatch('user/logout')
    }
    const goPage = (page: string) => {
      router.push(page)
    }

    const menu = (
      <Menu onClick={handleMenuClick}>
        <Menu.Item key="1">个人中心</Menu.Item>
        <Menu.Item key="2">退出登录</Menu.Item>
      </Menu>
    )

    let Right: any
    if (!store.state.user.userInfo.nickName) {
      Right = (
        <Col class="right">
          <span onClick={() => goPage('login')}>登录</span>
          <span onClick={() => goPage('register')}>注册</span>
          <span onClick={() => goPage('traffic')}>领取流量</span>
        </Col>
      )
    } else {
      Right = (
        <Dropdown overlay={menu}>
          <a class="ant-dropdown-link" onClick={e => e.preventDefault()}>你好 {store.state.user.userInfo.nickName}</a>
        </Dropdown>
      )
    }

    return () => (
      <Header class="layout-header">
        <Row type="flex" justify="space-between">
          <Col class="title-left">小精灵专栏</Col>
          <Right/>
        </Row>
      </Header>
    )
  }
})
